<template>
	<view class="businessMap-content">
		<scroll-view class="businessMap-content-page" scroll-y>
			<view class="businessMap-page-top">
				<view class="businessMap-top-address">
					成都
				</view>
				<view class="businessMap-top-search">
					
					<uni-icons type="search" size="20" :color="titleColor" @click="clickSearch"></uni-icons>
				</view>
			</view>
		
		<view class="businessMap-page-center">
			<template v-for="item in shoppingData" :key="item">
				<view class="businessMap-item">
					<view class="item-image">
						<image :src="item.img" mode="aspectFill"></image>
						
					</view>
					<view class="item-info">
						<view class="info-title">
							{{item.title}}
						</view>
						<view class="info-introduce">
							{{item.introduce}}
						</view>
					</view>
				</view>
			</template>
		<view class="businessMap-page-bottom">
			没有更多内容了
		</view>
		</view>
		</scroll-view>
		<uni-popup ref="businessMapSearch" type="center" background-color="#fff"  >
			
			
		<view class="businessMapForm">
		<view class="formData">
			<text>输入商家名称</text>
		<uni-forms ref="baseForm" :modelValue="alignmentFormData" label-position="top">
			
			
			<uni-easyinput v-model="alignmentFormData.clientId" placeholder="请输入要搜索的内容" />
			
		
			</uni-forms>
			</view>
			
			<view class="option-button">
				
				<view class="button-left" @click="submitClick">
					确认
				</view>
				<view class="button-right" @click="cancelClick">
					取消
				</view>
			</view>
			</view>
			</uni-popup>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	const shoppingData=ref([{
		img:'/static/images/head.jpg',
		title:'水磨沟区七道湾南路文英商行',
		introduce:'	新疆维吾尔自治区乌鲁木齐市水磨沟区七道湾和居社区南十四巷123号'
		
	},{
		img:'/static/images/head.jpg',
		title:'水磨沟区七道湾南路文英商行',
		introduce:'	新疆维吾尔自治区乌鲁木齐市水磨沟区七道湾和居社区南十四巷123号'
		
	},{
		img:'/static/images/head.jpg',
		title:'水磨沟区七道湾南路文英商行',
		introduce:'	新疆维吾尔自治区乌鲁木齐市水磨沟区七道湾和居社区南十四巷123号'
		
	},{
		img:'/static/images/head.jpg',
		title:'水磨沟区七道湾南路文英商行',
		introduce:'	新疆维吾尔自治区乌鲁木齐市水磨沟区七道湾和居社区南十四巷123号'
		
	},])
	//搜索商家导航
	const businessMapSearch=ref(null)
	function clickSearch(){
		businessMapSearch.value.open()
	}
	
	const alignmentFormData=reactive({
		clientId:'',
		point:0
	})
	
	function submitClick(){
		
		
		businessMapSearch.value.close()
	}
	function cancelClick()
	{
		businessMapSearch.value.close()
	}
</script>

<style lang="scss" scope>
	.businessMap-content-page{
		width: 100%;
		box-sizing: border-box;
	
		padding: 32rpx 32rpx;
		padding-top: 0rpx;
		.businessMap-page-top{
			display:flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;
			font-size: 28rpx;
			color: rgba(102, 102, 102, 1);
			// background-color: gainsboro;
		}
		.businessMap-page-center{
			width: 100%;
			height: 100vh;
			padding-top: 41rpx;
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			.businessMap-item{
				width: 100%;
				height: 120rpx;
				display: flex;
				
				.item-image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				image{
					width: 120rpx;
					height: 120rpx;
					
				}
				.info-title{
					font-size: 36rpx;
					color: rgba(0, 0, 0, 1);
				}
				.item-info{
					width: 600rpx;
					margin-left: 16rpx;
				}
				.info-introduce{
					color: rgba(102, 102, 102, 1);
					font-size: 24rpx;
				}
			}
		}
		
	.businessMap-page-bottom{
		padding-top:50rpx ;
		font-size: 28rpx;
		text-align: center;
		color: rgba(102, 102, 102, 1);
	}
	}
	.businessMapForm{
				 width: 532rpx;
				 height: 300rpx;
				 background-color: #fff;
				 border-radius: 15rpx;
				 overflow: hidden;
				 position: relative;
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
				 align-items: center;
				  z-index: 100;
				 font-size: 32rpx;
				 color: rgba(153, 153, 153, 1);
				
				 
				 :deep(.uni-easyinput__content){
					 margin-top: 30rpx;
					  height: 70rpx;
					  width: 440rpx;
				 							
				 }
				 :deep(.uni-easyinput__placeholder-class){
				 	font-size: 32rpx;
				 	font-weight: 500;
					color: rgba(204, 204, 204, 1);
				 }
				 .formData{
					 text-align: center;
				
				 }
						 .option-button{
							 display: flex;
							 justify-content: center;
							 align-items: center;
							 width: 100%;
							 margin-top: 21rpx;
							 border-top: 1px solid rgba(228, 228, 228, 1);
							 height: 78rpx;
							 
							
							 .button-left,.button-right{
								 flex: 1;
								 text-align: center;
								 line-height: 116rpx;
								 font-size: 36rpx;	 
								color: rgba(153, 153, 153, 1);
								 
							 }
							 .button-left{
								 border-right: 1px solid rgba(228, 228, 228, 1);
								 color: rgba(20, 125, 226, 1);
							 }
							
							
						 }
						 .Code-top{
							 width:100%;
							 height: 448rpx;
							 display: flex;
							 flex-direction: column;
							 justify-content: center;
							 align-items: center;
							 font-size: 28rpx;
							 color: rgba(187, 187, 187, 1);
						 }
						 .memeberImage{
							 width: 204rpx;
							 height: 204rpx;
							 image{
								 width: 100%;
								 height: 100%;
							 }
											  }
						.Code-bottom{
							width: 100%;
							height: 118rpx;
							border-top: 1px solid rgba(228, 228, 228, 1);
							text-align: center;
							line-height: 118rpx;
							font-size: 36rpx;
							color: rgba(102, 102, 102, 1);
							
						}
						 
						 }
	       
</style>
